<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="pl" xml:lang="pl">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>rcarousel – custom navigation</title>
        <link type="text/css" rel="stylesheet" href="css/reset.css" />		
        <link type="text/css" rel="stylesheet" href="css/style.css" />		
        <link type="text/css" rel="stylesheet" href="../widget/css/rcarousel.css" />
		<style type="text/css">
			#container {
				width: 300px;
			}
			
			#pages {
				width: 92px;
				height: 18px;
				margin: 5px auto 0 auto;
			}
			
			.bullet {
				background: url(images/page-off.png) center center no-repeat;
				display: block;
				width: 18px;
				height: 18px;
				margin: 0;
				margin-right: 5px;
				float: left;				
			}			
		</style>
	</head>
	<body>
		<div id="header">
			<p>
				This is an example of <em>rcarousel</em> – a jQuery UI continuous carousel.
				Go back to the <a href="http://ryrych.github.com/rcarousel/">documentation</a>
			</p>
		</div>
		
		<div id="content">
			<h1>more advanced example: callbacks, custom navigation and auto mode</h1>
			
			<div id="container">
				<div id="carousel">
					<img src="images/001.jpg" />
					<img src="images/002.jpg" />
					<img src="images/003.jpg" />
					<img src="images/004.jpg" />
					<img src="images/005.jpg" />
					<img src="images/006.jpg" />
					<img src="images/007.jpg" />
					<img src="images/008.jpg" />
					<img src="images/009.jpg" />
					<img src="images/010.jpg" />
				</div>
				<div id="pages"></div>
			</div>
		</div>

		<script type="text/javascript" src="../widget/lib/jquery-1.7.1.js"></script>
		<script type="text/javascript" src="../widget/lib/jquery.ui.core.js"></script>
		<script type="text/javascript" src="../widget/lib/jquery.ui.widget.js"></script>
		<script type="text/javascript" src="../widget/lib/jquery.ui.rcarousel.js"></script>
		<script type="text/javascript">
			jQuery(function($) {
				function generatePages() {
					var _total, i, _link;
					
					_total = $( "#carousel" ).rcarousel( "getTotalPages" );
					
					for ( i = 0; i < _total; i++ ) {
						_link = $( "<a href='#'></a>" );
						
						$(_link)
							.bind("click", {page: i},
								function( event ) {
									$( "#carousel" ).rcarousel( "goToPage", event.data.page );
									event.preventDefault();
								}
							)
							.addClass( "bullet off" )
							.appendTo( "#pages" );
					}
					
					// mark first page as active
					$( "a:eq(0)", "#pages" )
						.removeClass( "off" )
						.addClass( "on" )
						.css( "background-image", "url(images/page-on.png)" );

				}

				function pageLoaded( event, data ) {
					$( "a.on", "#pages" )
						.removeClass( "on" )
						.css( "background-image", "url(images/page-off.png)" );

					$( "a", "#pages" )
						.eq( data.page )
						.addClass( "on" )
						.css( "background-image", "url(images/page-on.png)" );
				}				

				$( "#carousel" ).rcarousel({
					auto: {enabled: true},
					start: generatePages,
					pageLoaded: pageLoaded
				});
				
				$( ".bullet" )
					.hover(
						function() {
							$( this ).css( "opacity", 0.7 );
						},
						function() {
							$( this ).css( "opacity", 1.0 );
						}
					);					
			});
		</script
    </body>
</html>
